import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { TabBar } from 'antd-mobile';
import {
  AppOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons';

import { RootState } from './redux/store';

import style from './css/App.module.css';

interface IProps {}

const Tabbar: React.FC<IProps> = (props) => {
  const isShow = useSelector((state: RootState) => state.tabbar.value);
  const navigate = useNavigate();

  let { pathname } = useLocation();
  let firstPath = '/' + pathname.split('/')[1];
  return (
    <>
      {isShow && (
        <div className={style.tabbar}>
          <TabBar
            activeKey={firstPath}
            onChange={(key) => navigate(key)}
          >
            <TabBar.Item
              key="/film"
              icon={<AppOutline />}
              title="电影"
            />
            <TabBar.Item
              key="/cinema"
              icon={<UnorderedListOutline />}
              title="影院"
            />
            <TabBar.Item
              key="/center"
              icon={<UserOutline />}
              title="我的"
            />
          </TabBar>
        </div>
      )}
    </>
  );
};

export default Tabbar;
